<template>
  <div class="billPage">
    <div class="container_bill">
      <!-- title -->
      <div class="bill_banner">
        <div class="bill_banner_1">
          <h1 class="bill_banner_h1">结算</h1>
        </div>
      </div>

      <!-- bill_wrapper -->
      <div class="bill_wrapper ncss_row">
        <div class="ncss_col_1">
          <div class="ncss_row">
            <main class="main_ncss_row ncss_col_1 va_t ncss_col_lg_8">
              <!-- 注意事项 -->
              <div class="bill_noticeBox">
                <div class="bill_notice">
                  <span class="bill_notice_content">自2021年9月28日起付款时限调整为30分钟（特别说明的商品除外）。尊敬的客户，近期有一些不法分子假冒大品牌员工实施欺诈行为。为了您的帐户和财产安全，请不要相信此类信息，谨防被骗。</span>
                </div>
              </div>
              <!-- 位置信息 支付方式 -->
              <div class="bill_site_way">
                <div class="bill_way_header">
                  <h2 class="bill_way_header_h2">配送信息</h2>
                  <button class="bill_way_header_btn" @click="editSite()">编辑信息</button>
                </div>
              </div>
              <div>
                <div class="ncss_row">
                  <div class="bill_info ncss_col_info">
                    <div class="bill_info_1">
                      <div class="bill_info_contentBox" v-loading="false" >
                        <span v-show="fillSiteShow == false" class="bill_info_contentBox_fillSite" @click="openPanel()">需要填写地址</span>
                        <!-- <div v-for="(item,index) in siteForm" :key="index"> -->
                          <div>
                            <span v-show="fillSiteShow == true">
                              <p class="clclc colos">
                                {{ siteForm.name }}
                                {{ siteForm.lastname }}
                              </p>
                                <p class="clclc colos">{{siteForm.phone}}</p>
                                <h3 class="bill_info_content_h3">配送地址</h3>
                                <p class="clclc colos">
                                  {{ siteForm.addressInfo }}<br>
                                  <span>{{ siteForm.addressDetail }}</span>
                                </p>
                            </span>
                          </div>
                        <!-- </div> -->
                      </div>
                      <div class="bill_info_shipping">
                        <h3 class="bill_info_content_h3">配送方式</h3>
                        <p class="clclc colos">
                          官方指定快递-免费<br>
                          <!-- <span>预计送达 2月15日周日</span> -->
                        </p>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <!-- 分割线 -->
              <div class="dline"></div>

              <div class="checkoutwayBox">
                <!-- header -->
                <div class="checkoutway_sale">
                  <h2 class="checkoutway_sale_h2">活动</h2>
                  <div class="sale_groups">
                    <div v-for="(item,i) in listCheck" :key="i">
                      <!-- 促销按钮 -->
                      <button  class="btn_filtercollapse"
                                     type="button" @click="FcchangeCheck(item.ckName,i)">
                        <!-- fc_checkbox_1  { fc_checkbox_1: no_check, fc_checked: yes_checked}-->
                        <div :class="{'fc_checked': item.check == 1,'fc_checkbox_1': item.check == 0}">
                          <div class="icon_checked"></div>
                        </div>
                        <span class="fc_content">{{item.ckName}}</span>
                      </button>
                      <!-- 促销按钮 -->
                      <div class="salecode_input" v-show="salecode_inputShow">
                        <el-form :inline="true" :model="saleCodePart" ref="saleCodePart">
                          <el-form-item>
                            <el-col :span="24" class="salecode_input_wid">
                            <el-input class="" :class="{'saleCode_yes':verifyNo,'saleCode_no':verifyYes}" 
                            v-model="saleCodePart.saleCode" placeholder="促销代码"></el-input>
                             </el-col>
                          </el-form-item>
                          <el-form-item>
                            <div class="salecode_input_btn"> 
                              <el-button @click="verifyCode()" class="salecode_search" :loading="btnShow_loading">查询</el-button>
                            </div>
                            
                          </el-form-item>
                        </el-form>
                        <div class="salecode_prompt">
                           <span style="color:green;" v-show="verifyYes">代码可用</span>
                          
                           <span style="color:red;" v-show="verifyNo">代码是无效的 弟弟</span>
                        </div>
                       
                      </div>
                    </div>
                  </div>


                </div>
                 <div class="dline"></div>
                <div class="checkoutway_header ">
                  <h2 class="checkoutway_header_h2">支付</h2>
                </div>
                <div>
                  <div class="ncss_row checkoutwayBox_info">
                    <div class="ncss_col_nch">
                      <!-- <div class="ncss_col_nch_1">
                      
                      </div> -->
                      <div class="ncss_col_nch_selectBox">
                        <div class="ncss_row selectBox_1">
                          <div class="ncss_col_nch_1 alipay_box">
                            <div class="alipay_1"  @click="selectPay" 
                            :class="{'alipay_1':paybtnshow==true,'alipay_11':paybtnshow==false}">
                              <i class="alipay_1_before"></i>
                              <!-- <div class="alipay_1_2">
                                <span>
                                  <button class="alipay_1_2_btn">
                                    <span class="alipay_1_2_btn_span"></span>
                                  </button>
                                </span>
                              </div> -->
                            </div>
                          </div>
                          <div class="ncss_col_nch_1 alipay_box">
                            <div class="alipay_1"  @click="selectPay" 
                            :class="{'alipay_1':paybtnshow==false,'alipay_11':paybtnshow==true}">
                              <i class="wechat_1_before"></i>
                              <!-- <div class="alipay_1_2">
                                <span>
                                  <button class="alipay_1_2_btn">
                                    <span class="alipay_1_2_btn_span"></span>
                                  </button>
                                </span>
                              </div> -->
                            </div>
                          </div>

                        </div>

                      </div>

                    </div>
                  </div>
                </div>
                <div class="bill_buyBox">
                  <div class=" bill_buyBox_policy">
                    <div class="bill_buyBox_policy_1 ncss_col_policy_1"> 
                      <div class="bill_buyBox_policy_2">
                        <span class="">
                          我已阅读、理解并接受
                          <a href="">使用条款</a>
                          、
                           <a href="">销售条款</a>
                          、
                           <a href="">隐私政策</a>
                          和
                          <a href="">退换货政策</a>
                          </span>
                      </div>
                    </div>
                  </div>

                  <div class=" bill_buyBtn">
                    <div class="bill_buyBtn_it">
                      <el-button class="bill_buyBtn_it_1" @click="checkoutBill()" :loading="loadingshow">
                        下单
                        <i class="" :class="{'bill_buyBtn_it_i1':paybtnshow==true,'bill_buyBtn_it_i2':paybtnshow==false}"></i>
                        </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </main>

            <!-- right 预览 -->
            <aside class="cart_priviewBox ncss_cp1 ncss_cp2">

              <div class="cart_priviewBox_1">
                <!-- header -->
                <div class="priviewBox_ptm">
                  <button class="priviewBox_btn">编辑</button>
                  <h2 class="priviewBox_title">购物车预览</h2>
                </div>
                <!-- content -->
                <div class="priviewBox_infoBox">
                  <!-- 价格信息 -->
                  <div class="ncss_row">
                    <div class="priceInfo_priview ncss_cp1 ncss_cp2">
                      <div class="ncss_row">
                        <div class="priceInfo_left ncss_cp1 ncss_cp2">
                          <div class="priceInfo_left_item">
                            <span>小计</span>
                            <!-- 实际商品总额指应用任何适用折扣前的订单总金额。 -->
                            <el-tooltip class="item" effect="dark" :content=pricetips placement="bottom">
                              <span><svg t="1673541737661" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5912" width="14" height="14"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0.512 576a53.333333 53.333333 0 1 0 0 106.666667 53.333333 53.333333 0 0 0 0-106.666667zM512 256a149.333333 149.333333 0 0 0-149.333333 149.333333 42.666667 42.666667 0 0 0 85.333333 0l0.298667-6.144A64 64 0 0 1 576 405.333333c0 25.301333-7.296 35.626667-36.181333 57.216l-13.824 10.453334c-38.912 30.464-56.405333 56.533333-56.661334 103.082666a42.666667 42.666667 0 0 0 85.333334 0.469334l0.128-3.754667c0.981333-13.141333 7.253333-20.352 30.293333-37.546667l14.037333-10.666666C641.706667 491.093333 661.333333 460.117333 661.333333 405.333333A149.333333 149.333333 0 0 0 512 256z" fill="#000000" p-id="5913"></path></svg></span>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="priceInfo_right_price ncss_cp1 ncss_cp2">
                          <div>¥{{ orderInfo.goodsTotalPrice }}.00</div>
                        </div>
                      </div>
                      <div class="ncss_row">
                        <div class="priceInfo_left ncss_cp1 ncss_cp2">
                          <div class="priceInfo_left_item">
                            <span>预计运费</span>
                          </div>
                        </div>
                        <div class="priceInfo_right_price ncss_cp1 ncss_cp2">
                          <div>¥22.00</div>
                        </div>
                      </div>
                      <div class="ncss_row">
                        <div class="priceInfo_left ncss_cp1 ncss_cp2">
                          <div class="priceInfo_left_item">
                            <span>减免</span>
                            <el-tooltip class="item" effect="dark" :content=saletips placement="bottom">
                            <span>
                              <svg t="1673377191907" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="9820" width="12" height="12">
                                <path
                                  d="M512 4.12672c280.49408 0 507.87328 227.3792 507.87328 507.87328 0 280.49408-227.3792 507.87328-507.87328 507.87328C231.50592 1019.87328 4.12672 792.49408 4.12672 512 4.12672 231.50592 231.50592 4.12672 512 4.12672zM512 685.96736c-42.47552 0-76.91264 34.42688-76.91264 76.91264 0 42.47552 34.43712 76.91264 76.91264 76.91264 42.47552 0 76.91264-34.43712 76.91264-76.91264C588.91264 720.39424 554.47552 685.96736 512 685.96736zM509.78816 625.83808c36.58752 0 66.24256-29.66528 66.24256-66.24256l0-309.1456c0-36.58752-29.65504-66.24256-66.24256-66.24256-36.58752 0-66.24256 29.66528-66.24256 66.24256l0 309.1456C443.5456 596.18304 473.20064 625.83808 509.78816 625.83808z"
                                  fill="#272636" p-id="9821"></path>
                              </svg>
                            </span>
                            </el-tooltip>
                          </div>
                        </div>
                        <div class="priceInfo_right_price ncss_cp1 ncss_cp2">
                          <div>¥22.00</div>
                        </div>
                      </div>
                      <div class="ncss_row">
                        <div class="priceInfo_left ncss_cp1 ncss_cp2">
                          <div class="priceInfo_left_item">
                            <span>总计</span>
                          </div>
                        </div>
                        <div class="priceInfo_right_price ncss_cp1 ncss_cp2">
                          <div>¥{{ orderInfo.goodsTotalPrice }}.00</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 商品详情 -->
                  <div class="detail_priview">
                    <div class="detail_priview_1">
                      <div>
                        <div class="detail_priview_header">
                          <h3 class="detail_priview_h3">
                            预计送达
                            2月15日周一
                          </h3>
                        </div>

                        <div class="detail_priview_info" v-for="item,index in orderInfo.orderDetails" :key="index">
                          <div class="detail_priview_info_item">
                            <div class="detail_imgBox">
                              <img class="detail_img" :src="'/static/gd/'+item.goodsPic" alt="">
                            </div>
                            <div class="detail_contentBox">
                              <div class="detail_content">
                                <!-- Nike ACG 男子连帽衫 -->
                                {{item.goodsname}}
                              </div>
                              <div class="detail_content_1">款式编号：FD6548-{{index}}</div>
                              <div class="detail_content_1">尺码：{{item.goodssize}}</div>
                              <!-- <div class="detail_content_1">颜色：{{item.goodscolor}}</div> -->
                              <div class="detail_content_1">数量：{{item.goodsnum}}</div>
                              <div class="detail_content_1" style="font-weight:600;">价格：¥{{item.goodsprice}}.00</div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </aside>
          </div>
        </div>
      </div>
    </div>

    <popCard ref="popsiteForm" :showFs="popShow" 
    @submitToParent="saveSite"
    :siteUpdateForm="siteForm" 
    @closePanel="closePanel" v-show="popcardshow" ></popCard>

    <popBill v-show="billShow"
     @closeBillMessage="closeBillPanel" @toOrderPage="toOrder"></popBill>

    <popSiteForm ref="updateAddress" v-show="popSiteShow" :updateAddress=siteForm
     @closeSiteMessage="closeSitePanel" @submitToSite="saveUpdateSite"></popSiteForm>
    <!-- <mymessage v-show="showMessagePanel" :content="dynamicContent" @closeMessage="closeMessage"></mymessage> -->
  </div>
</template>

<script>
import popCard from '../pops/popCard.vue'
import popBill from './billpop/billpop.vue'
import popSiteForm from './billpop/Sitepop.vue'
// import mymessage from '../pops/mymessage.vue'
export default {
  components: {
      popCard,popBill,popSiteForm
  },
  mounted () {
    this.getOrderInfo();
    this.defaultAddress();
  },
  inject: [
    "reload","MyMessage"
  ],
  name: 'billpage',
  data () {
    return {
      msg: '',
      loadingshow:false,
      popSiteShow:false,
      popShow:'编辑', //测试传递给子组件
      fillSiteShow:false,
      pricetips:'实际商品总额指应用任何适用折扣前的订单总金额。',
      saletips:'赠送的折扣代码、礼品卡、优惠券等',
      paybtnshow:false,
      paymentWays:'支付宝',
      popcardshow:false,
      billShow:false,//支付框
      salecode_inputShow:false,
      btnShow_loading:false,
      verifyNo:false,
      verifyYes:false,
      // 地址信息
      siteForm: {
        addressId:0,
        name: '',
        lastname:'',
        phone: '',
        address:[],
        addressInfo:'',
        addressDetail:'',
        addefault:false,
        formshow:false,
      },
      listCheck:[
          { value: 0, ckName: "促销代码" ,check:0},
          // { value: 1, ckName: "商品券" ,check:0},
      ],
      saleCodePart: { //折扣代码部分
        saleCode: '',
      },
      orderInfo:{
        orderId:0,
        goodsNum:0,
        goodsTotalPrice:0,
        //商品列表
        orderDetails:[]
      }
    }
  },
  methods: {

    getOrderInfo(){ //结算页面获取订单信息
      //需要 userId orderId 
      let formData = {
        userId:localStorage.userId,
        orderId:localStorage.orderId
      }
      this.$axios.post('/g-order/getOrderCheckPage', formData)
      .then(res => {
        console.log(res.data.data);
        this.orderInfo = res.data.data
        console.log(this.orderInfo);
      })
    },
 
    //this.fillSiteShow = true;
    defaultAddress(){
      //用户id  状态1 
      let formData = {
        userId:localStorage.userId,
        adStatus:1
      }
       this.$axios.post('/addressinfo/getDefaultAddressList', formData)
      .then(res => {
        if(res.data.data){
          this.siteForm = res.data.data
          this.fillSiteShow = true;
        }else{
          console.log("当前无默认地址");
        }
        
      })
    },

    editSite(){
      this.popSiteShow = true;
    },
    openPanel(){
      this.popcardshow = true;
    },
    closeSitePanel(){
       this.popSiteShow = false;
    },
    closeBillPanel(data){
      this.billShow = data;
    },
    closePanel(data){
      this.popcardshow = data;
    },
    saveSite(data){
      // JSON.stringify(data) 转换为JSON格式字符串
      // JSON.parse(data); 转换为对象
      console.log(data);
      this.siteForm = data;
      this.popcardshow = this.siteForm.formshow; //填写框 false 关闭
      this.fillSiteShow = true;
    },
    saveUpdateSite(data){
      this.siteForm = data;
      console.log(this.siteForm.formshow);
      this.popSiteShow = false;
      this.fillSiteShow = true;
    },
    // 选择支付方式
    selectPay(){
      if(this.paybtnshow == false){
           this.paybtnshow = true;
           this.paymentWays = '微信'
           return;
      }
      if(this.paybtnshow == true){
          this.paybtnshow = false;
           this.paymentWays = '支付宝'
          return;
      }
    },
    FcchangeCheck(val,index){
      console.log(val);
      if (this.listCheck[index].check == 1) {//当前选中
        this.listCheck[index].check = 0;
        this.salecode_inputShow = false;
     
      } else if (this.listCheck[index].check == 0) {//未选中
        this.listCheck[index].check = 1;
         this.salecode_inputShow = true;
      }

    },
    // 折扣 核实代码
    verifyCode() {
      this.btnShow_loading = true;
      setTimeout(() => {
        if(this.saleCodePart.saleCode == 110){
          this.verifyYes = true;
          this.verifyNo = false;
        }else{
           this.verifyYes = false;
           this.verifyNo = true;
          //  this.showMessage('您的折扣代码有误');
          this.MyMessage("折扣代码有误，请您仔细检查");
           
        }
         this.btnShow_loading = false;
      }, 500);
    },

    //结算
    checkoutBill(){
      console.log(this.paymentWays);
      if(this.siteForm.name == ''){
        this.MyMessage("请选择收货地址")
      }else{
          this.loadingshow = true;
      setTimeout(() => {
        this.loadingshow = false;
        console.log(1111);
         this.billShow = true;
      }, 1000);
      }
    
    
      
    },
    toOrder(val){
 
      let addressDafault = 0;
      if(this.siteForm.addefault == false){
        addressDafault = 0
      }else{
        addressDafault = 1
      }
      let userName = this.siteForm.name + this.siteForm.lastname
      let userPhone = this.siteForm.phone
      //此处更新订单。。。
       let formData = {
        orderId:localStorage.orderId,
        userId:localStorage.userId,
        userName:userName,
        userPhone:userPhone,
        addressId:this.siteForm.addressId,
        addressInfo:this.siteForm.addressInfo,
        addressDetailInfo:this.siteForm.addressDetail,
        addressDefault:addressDafault,
        payWay:this.paymentWays,
        orderStatus:1,
      }
      // this.MyMessage(val)
      if (val) {
        this.$axios.post('/g-order/addOrder', formData)
          .then(res => {
            if (res.data.data) {
              console.log(res.data.data);
                this.$router.push({
                  name: 'orderAll',
                  params: {
                    userId: 1
                  } //需要获取一个userId
                });
            }else{
              this.MyMessage("支付出现错误")
            }
          })
      }
      
    },


    // 刷新
    toReload() {
      this.reload();
    },
  },
  watch:{
  },
  computed:{
  },
  
}
</script>

<style scoped>
h1, h2, h3, h4, h5, h6,a,
div,p,fieldset,legend,span{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

[class*="ncss_col_"]{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
}
.clclc{
  font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    color: rgb(117, 117, 117);
}
.colos{
    font-family: "Helvetica Neue", Helvetica, Arial, "Heiti SC", "ST Heiti", 华文黑体, "Microsoft YaHei", 雅黑体, SimHei, 黑体, sans-serif;
    line-height: 1.71429;
}
.billPage{
  margin-top: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    color: rgb(117, 117, 117);
}

.container_bill{
  /* border: 1px solid springgreen; */
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
    min-height: 100%;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

/* 横幅 */
.bill_banner{
    font-size: 0;
    margin-left: -8px;
    margin-right: -8px;
    /* border: 1px solid red; */
    margin-top: 1px;
    margin-bottom: 20px;
}
.bill_banner_1{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    /* font-size: 18px; */
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
    text-align: center;
}
.bill_banner_h1{
    color: rgb(17, 17, 17);
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 28px;
    font-style: normal;
    text-transform: none;
}

/* main */
.ncss_row{
    font-size: 0;
    margin-left: -8px;
    margin-right: -8px;
}
.bill_wrapper{
  /* border: 1px solid red; */
  max-width: 1090px;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - 396px);
}
.ncss_col_1{
    width: 100%;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
}
.va_t{
  vertical-align: top;
}
.ncss_col_lg_8{
    width: 66.66666666666666%;
    display: inline-block;
}
/* main 标签的 */
.main_ncss_row{
    position: relative;
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px
}

.bill_noticeBox{
  display: block;
  text-transform: none;
  color: rgb(117, 117, 117);
}
.bill_notice{
    color: rgb(117, 117, 117);
    background: #e5e5e5;
    margin-bottom: 20px;
    padding-bottom: 16px;
    padding-top: 16px;
    padding-right: 20px;
    padding-left: 20px;
}
.bill_notice_content{
  color: rgb(117, 117, 117);
  padding-bottom: 12px;
  padding-top: 12px;
  display: block; 
  text-transform: none;   
}

/* 位置信息 支付方式  */
.bill_site_way{
    margin-bottom: 3px;
    display: block;
    text-transform: none;
    color: rgb(117, 117, 117);
}

.bill_way_header{
    display: flex;
    flex-direction: row;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 12px;
}
.bill_way_header_h2{
    color: rgb(17, 17, 17);
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    font-style: normal;
    text-transform: none;
    flex: 1 1 auto;
}
.bill_way_header_btn{
      font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    text-decoration: underline 1.5px rgb(17, 17, 17);
    box-sizing: border-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    padding: 0px;
    color: rgb(17, 17, 17);
    background: transparent;
    border: 0px;
    font-size: 12px;
    line-height: 18px;
    text-underline-offset: 4px;
    box-shadow: rgb(17 17 17) 0px 0px 0px 0px inset;
    text-align: start;
    height: 18.5px;
    position: relative;
    top: 8px;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}
.bill_way_header_btn:hover{
   color: rgb(101, 101, 101);
}

.bill_info_contentBox_fillSite{
  cursor: pointer;
  font-size: 20px;
 color: rgb(124, 123, 123);
 background: transparent;
 box-shadow: rgb(17 17 17) 0px 0px 0px 0px inset;
 text-transform: none;
 text-decoration: underline 1.5px rgb(17, 17, 17);
 text-underline-offset: 5px;
 overflow: visible;
 -webkit-tap-highlight-color: transparent;
 -webkit-appearance: none;
 font-weight: 500;
}
.bill_info_contentBox_fillSite:hover{
 color: rgb(17, 17, 17);
}





.bill_info{
      padding: 20px;
      width: 100%;
    display: inline-block;
    position: relative;
    min-height: 1px;
}

.bill_info_1{
    margin-left: 8px;
    margin-right: 8px;
}

.bill_info_contentBox{
  margin-bottom: 16px;
  color: rgb(117, 117, 117);
}
.bill_info_content_h3{
  color: rgb(17, 17, 17);
}




/* 分割线 */
.dline{
    border-width: 0px 0px 1px;
    border-top-style: initial;
    border-right-style: initial;
    border-left-style: initial;
    border-top-color: initial;
    border-right-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-bottom-style: solid;
    border-bottom-color: rgb(206, 205, 205);
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* 支付选择 */
.checkoutway_sale{
      /* display: flex;
    flex-direction: row; */
    padding-top: 12px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
}
.checkoutway_sale_h2{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  font-style: normal;
  text-transform: none;
  color: rgb(17, 17, 17);

}
.sale_groups{
  margin-top: 20px;
  /* margin-left: 20px; */
  margin-right: 20px;
  margin-bottom: 10px;
}

.btn_filtercollapse{
  /* margin: 4px 2px; */
  margin-top: 10px;
  color: #111111;
  cursor: pointer;
  display: flex;
  overflow-wrap: break-word;
  position: relative;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  /* width: 96%; */
  font-weight: 400;
  line-height: 1.3;
  background: transparent;
  border: 0;
  
  border: 2px transparent;
}
.btn_filtercollapse:hover{
color: #6c6b6b;
}

.btn_filtercollapse .fc_checkbox_1{
flex-shrink: 0;
width: 20px;
height: 20px;
vertical-align: top;
border: solid 1px #ccc;
border-radius: 4px;
margin-right: 3px;
display: inline-block;
position: relative;
/* transition: .2s; */
}
.btn_filtercollapse .fc_checkbox_1:hover{
  border: solid 1px rgb(101, 101, 101);
  transition: .2s;
}
.btn_filtercollapse .fc_checked{
flex-shrink: 0;
width: 20px;
height: 20px;
vertical-align: top;
border: solid 1px #ccc;
border-radius: 4px;
margin-right: 3px;
display: inline-block;
position: relative;
transition: .2s;
    border-color: #111111;
    background: #111111;
    /* transition: all .8s;  */
}

.fc_checked .icon_checked{
    color: #fff;
    position: absolute;
    top: 3px;
    left: 2px;
    display: inline-block;
    width: 13px;
    height: 13px;
    
}
.fc_checked .icon_checked::before{
    animation: icon_checked 300ms;
    animation-fill-mode: forwards;
    width: 8px;
    height: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 1px;
    border-top-right-radius: 4px;
   
    
    background-color: currentColor;
    display: block;
    position: absolute;
    content: '';
    transform-origin: left center;
}
@keyframes icon_checked{
    from{
        transform: rotate(-10deg);
        top: -1px;
        left: -5px;
        width: 15px;
        height: 10px;
    }
    to{
        transform: rotate(49deg);
        top: 5px;
        left: 2px;
        width: 8px;
        height: 3px;
    }
}
.fc_checked .icon_checked::after{
    animation: animation-checked 300ms;
    animation-fill-mode: forwards;
   
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
   
    /* transform: rotate(-56deg); */
    content: '';
    background-color: currentColor;
    display: block;
    position: absolute;
    transform-origin: right center;
}
@keyframes animation-checked{
    from{
        transform: rotate(-150deg);
        top:0px;
        left: -10px;
        width: 3px;
        height: 12px;
    }
    to{
        transform: rotate(-56deg);
        top:-1px;
        left: -1px;
        width: 15px;
        height:3px;
    }
}
/* collapse */
.btn_filtercollapse .fc_content{
    display: inline-block;
    word-break: break-word;
    white-space: normal;
    margin-left: 8px;
    font-weight: 500;
    font-size: 17px;
}



.salecode_input{
  margin-top: 5px;
  /* width: 200px;
  height: 10px; */
  /* border: 1px solid red; */
}
.salecode_input_wid{
  width: 500px;
  margin-top: 10px;
  border-color: transparent;
}
.salecode_input >>> .el-input__inner:focus{
  border-color:rgb(6, 4, 4) !important;
}
.salecode_input >>> .el-button--primary{
  border-color: transparent !important;
}
.salecode_search{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 15px;
    font-weight: 500;
    /* line-height: 24px; */
    font-style: normal;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    /* padding: 18px 24px; */
    /* width: 100%; */
    /* min-height: 60px; */
    position: relative;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    background: rgb(17, 17, 17);
    color: rgb(255, 255, 255);
    border-radius: 30px;
    /* outline: transparent solid 1px; */
    margin-top: 10px;
}
/* 提示 */
.saleCode_yes >>> .el-input__inner{
  border-color: red !important;
}
.saleCode_no >>> .el-input__inner{
  border-color: green !important;
}
.salecode_prompt{
  margin-top: -3px;
  margin-left: 5px;
  
}
.salecode_prompt span{
  font-size: 12px;
}

/* 支付 */
.checkoutwayBox{
  margin-bottom: 20px;
  display: block;
  /* border: 1px solid red; */
}
.checkoutway_header{
    display: flex;
    flex-direction: row;
    padding-top: 12px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
}
.checkoutway_header_h2{
  font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  font-style: normal;
  text-transform: none;
  color: rgb(17, 17, 17);
  flex: 1 1 auto;
}

.checkoutwayBox_info{
  /* margin-top: 8px; */
  font-size: 0;
  margin-left: -8px;
  margin-right: -8px;
}

.ncss_col_nch{
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
    min-height: 1px;
    width: 97.8%;
    display: inline-block;
}

.ncss_col_nch_1{
    padding-bottom: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-left: 4px;
}
/* 选择支付方式 */
.ncss_col_nch_selectBox{
    display: block;
    box-shadow: rgb(229 229 229) 0px 0px 0px 1px inset !important;
    background: #f7f7f7;
    /* width: 100%; */
    padding-left: 14px;
    padding-right: 8px;
    position: relative;
    min-height: 1px;
}

.selectBox_1{
    padding-left: 12px;
    padding-right: 20px;
    font-size: 0;
    margin-left: -8px;
    margin-right: -8px;
}
.alipay_box{
    padding: 16px 8px;
    width: 21%;
    display: inline-block;
    position: relative;
    min-height: 1px;
}
.alipay_1{
      box-shadow: rgb(221 221 221) -1px 0px 0px 0px inset, rgb(221 221 221) 0px -1px 0px 0px inset, rgb(221 221 221) 1px 0px 0px 0px inset, rgb(221 221 221) 0px 1px 0px 0px inset !important;
  /* box-shadow: rgb(34 34 34) -1px 0px 0px 0px inset, rgb(34 34 34) 0px -1px 0px 0px inset, rgb(34 34 34) 1px 0px 0px 0px inset, rgb(34 34 34) 0px 1px 0px 0px inset !important; */
  background: rgb(255, 255, 255);
  height: 72px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  line-height: 72px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 8px;
}
.alipay_11{
  box-shadow: rgb(34 34 34) -1px 0px 0px 0px inset, rgb(34 34 34) 0px -1px 0px 0px inset, rgb(34 34 34) 1px 0px 0px 0px inset, rgb(34 34 34) 0px 1px 0px 0px inset !important;
  background: rgb(255, 255, 255);
  height: 72px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  line-height: 72px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 8px;
}
.alipay_1_before::before{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
    display: inline-block;
    height: 36px;
    vertical-align: middle;
    width: 120px;
    background-image: url();
}
.wechat_1_before::before{
   background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
    display: inline-block;
    height: 36px;
    vertical-align: middle;
    width: 120px;
        background-image: url();
}

.bill_buyBox{
  box-shadow: rgb(229 229 229) 0px 1px 0px 0px inset, rgb(229 229 229) -1px 0px 0px 0px inset, rgb(229 229 229) 0px -1px 0px 0px inset, rgb(229 229 229) 1px 0px 0px 0px inset;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;

}
.bill_buyBox_policy{
  display: block;
}
.bill_buyBox_policy_1{
  color: rgb(109, 109, 109);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  width: 80%;
  display: inline-block;
  position: relative;
  min-height: 1px;
}
.bill_buyBox_policy_2{
  line-height: 1.333333333333333;
    font-size: 12px;
    color: rgb(109, 109, 109);
}
.bill_buyBox_policy_2 a{
  text-decoration: underline;
  color: #111;
  cursor: pointer;
}
.bill_buyBtn{
  display: block;
}
.bill_buyBtn::before{
      content: "";
    display: table;
}
.bill_buyBtn_it{
    display: flex;
    flex-flow: row-reverse wrap;
    gap: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
    text-align: right;
    padding-right: 20px;
    padding-bottom: 20px;
    /* width: 100%; */
    position: relative;
    min-height: 1px;
    /* padding-left: 8px; */
    margin: 0;
}

.bill_buyBtn_it_1{
    border: none;
    padding: 6px 20px;
    width: auto;
    height: auto;
    min-height: auto;
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    padding: 18px 24px;
    /* width: 100%; */
    min-height: 60px;
    position: relative;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    background: rgb(17, 17, 17);
    color: rgb(255, 255, 255);
    border-radius: 30px;
    outline: transparent solid 1.5px;
}
.bill_buyBtn_it_i{
  margin-left: 8px;
}
.bill_buyBtn_it_i1::before{
  background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 22px;
    margin-top: -4px;
    vertical-align: middle;
    width: 34px;
    /* 微信 */
    background-image: url();
}
.bill_buyBtn_it_i2::before{
  background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 22px;
    margin-top: -4px;
    vertical-align: middle;
    width: 34px;
    /* 支付宝 */
    background-image: url();
}

/* cart预览 */
/* right aside */
.ncss_cp1{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
}
.ncss_cp2{
    position: relative;
    min-height: 1px;
    display: none;
    font-size: 14px;
    line-height: 1.714285714285714;
    padding-left: 8px;
    padding-right: 8px;
}
aside{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}
.cart_priviewBox{
    vertical-align: top;
    width: 30%;
    display: inline-block;
    /* border: 1px solid red; */
}
.cart_priviewBox_1{
  margin-bottom: 20px;
  color: rgb(117, 117, 117);
  display: block;
}
.priviewBox_ptm{
  padding-top: 12px;
  padding-right: 20px;
  padding-left:10px;
  padding-bottom: 20px;
  display: block;
}
.priviewBox_btn{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    text-decoration: underline 1.5px rgb(17, 17, 17);
    box-sizing: border-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    padding: 0px;
    color: rgb(17, 17, 17);
    background: transparent;
    border: 0px;
    font-size: 12px;
    line-height: 18px;
    text-underline-offset: 4px;
    box-shadow: rgb(17 17 17) 0px 0px 0px 0px inset;
    text-align: start;
    position: relative;
    top: 4px;
    float: right;
}
.priviewBox_btn:hover{
  color: rgb(78, 76, 76);
}
.priviewBox_title{
  color: rgb(17, 17, 17);
  font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  font-style: normal;
  text-transform: none;
}

/* content */
.priviewBox_infoBox{
    margin-bottom: 20px;
    width: 100%;
    /* padding-left: 8px; */
    padding-right: 8px;
}
.priceInfo_priview{
    width: 100%;
    display: inline-block;
    color: rgb(17, 17, 17);
    padding: 20px;
    position: relative;
    min-height: 1px;
}

.priceInfo_left{
  vertical-align: top;
  color: rgb(17, 17, 17);
  width: 66.66666666666666%;
  display: inline-block;
}
.priceInfo_left_item{
  display: inline-block;
  color: rgb(17, 17, 17);
  font-size: 16px;
  font-weight: 500;
}

.priceInfo_right_price{
  position: relative;
  right: 15px;
  color: rgb(17, 17, 17);
  font-size:16px;
  font-weight: 500;
  vertical-align: top;
  text-align: right;
/* width: 30.33333333333333%; */
  display: inline-block;
}


/* detail */
.detail_priview{
  margin-bottom: 20px;
}
.detail_priview_1{
    padding-top: 24px;
    margin-left: 8px;
    margin-right: 8px;
}
.detail_priview_h3{
    color: rgb(17, 17, 17);
      font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
}

.detail_priview_info{
  border-spacing: 0 20px;
  display: table;
  color: rgb(117, 117, 117);
}

.detail_priview_info_item{
    max-width: 230px;
    padding-bottom: 20px;
    display: table-row;
}
.detail_imgBox{
  vertical-align: top;
  display: table-cell;
}
.detail_img{
  height: 100px;
  width: 100px;
}

.detail_contentBox{
  color: rgb(117, 117, 117);
  vertical-align: top;
  padding-left: 20px;
  display: table-cell;
}
.detail_content{
  color: rgb(17, 17, 17);
  margin-bottom:5px;
  display: block;
  line-height: 1.285714285714286;
  font-size: 16px;
}
.detail_content_1{
  color: rgb(117, 117, 117);
  margin-bottom: -5px
}
</style>
